<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!-- 预连接CDN + 异步加载样式 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
          media="print" onload="this.media='all'">
    <noscript><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></noscript>

    <!-- 精简压缩后的内联样式 -->
    <style>
        body{background:linear-gradient(120deg,#7f7fd5,#86a8e7,#91eac9);min-height:100vh;display:flex;align-items:center;}
        .register-card{width:90%;max-width:500px;margin:auto;padding:3rem;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.15);background:rgba(255,255,255,0.95);}
        .form-group{margin-bottom:1.8rem;width:100%;}.form-label{font-weight:600;color:#2c3e50;margin-bottom:0.8rem;display:block;font-size:1.1rem;}
        .form-control{border-radius:10px;border:2px solid #e0e0e0;padding:14px 18px;transition:border-color 0.3s;width:100%;box-sizing:border-box;font-size:1.1rem;}
        .form-control:focus{border-color:#7f7fd5;outline:none;}.register-btn{width:80%;padding:16px;font-size:1.2rem;border-radius:30px;margin:2.5rem auto 0;display:block;}
        .btn-custom{background:#7f7fd5;color:#fff;border:none;transition:transform 0.2s;}.btn-custom:hover{transform:translateY(-2px);}
        .alert{margin-bottom:1.5rem;}
        .login-link{text-align:center;margin-top:1.5rem;font-size:1.1rem;}
        @media (max-width: 576px) {
            .register-card{padding:2rem;}
            .form-control{padding:12px 16px;font-size:1rem;}
            .register-btn{width:90%;padding:14px;font-size:1.1rem;}
            .form-label{font-size:1rem;}
            .login-link{font-size:1rem;}
        }
        @media (prefers-reduced-motion: reduce){.btn-custom,.form-control{transition:none;}}
    </style>
</head>
<body>
<div class="register-card">
    <h2 class="text-center mb-4" style="color:#4a4a4a;font-weight:700;font-size:2rem;">用户注册</h2>
    <form th:action="@{/register}" method="post">
        <div th:if="${error}" class="alert alert-danger" role="alert" th:text="${error}"></div>

        <div class="form-group">
            <label class="form-label">用户名</label>
            <label>
                <input type="text" name="userName" class="form-control" placeholder="请输入用户名" required>
            </label>
        </div>

        <div class="form-group">
            <label class="form-label">账号（userID）</label>
            <label>
                <input type="text" name="userID" class="form-control" placeholder="请输入账号" required>
            </label>
        </div>

        <div class="form-group">
            <label class="form-label">密码</label>
            <label>
                <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
            </label>
        </div>

        <div class="form-group">
            <label class="form-label">确认密码</label>
            <label>
                <input type="password" name="confirmPassword" class="form-control" placeholder="请再次输入密码" required>
            </label>
        </div>

        <div class="form-group">
            <label class="form-label">邮箱</label>
            <label>
                <input type="email" name="email" class="form-control" placeholder="请输入邮箱" required>
            </label>
        </div>
        <div class="form-group">
            <label class="form-label">用户类型</label>
            <select name="role" class="form-control" required>
                <option value="">请选择用户类型</option>
                <option value="customer">客户</option>

            </select>
        </div>
        <button type="submit" class="btn btn-custom register-btn">注册</button>

        <div class="login-link">
            <a href="/login" style="color:#7f7fd5;text-decoration:none;">已有账号？立即登录</a>
        </div>
    </form>
</div>

<!-- 异步加载字体优化 -->
<script>
    window.onload = function(){
        var timer = setTimeout(function(){
            var link = document.createElement('link');
            link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap';
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }, 1000);

        window.addEventListener('load', function(){ clearTimeout(timer); });
        document.addEventListener('DOMContentLoaded', function(){ clearTimeout(timer); });
    }
</script>
</body>
</html> 